<script setup lang="ts">
import mp5 from '~/assets/imgs/banner/banner-mp5.png';
import pc5 from '~/assets/imgs/banner/banner-pc5.png';

// Christmas
// import mp5 from '~/assets/imgs/banner/banner-mp-christmas.png';
// import pc5 from '~/assets/imgs/banner/banner-pc-christmas.png';

// New Yaer
// import mp5 from '~/assets/imgs/banner/banner-mp-new_year.png';
// import pc5 from '~/assets/imgs/banner/banner-pc-new_year.png';

import { openDepositFn } from '~/components-business/global-popups/newWallet/ts/depositBonusInfoHook';

const bp = useAppBreakpoints();
const router = useRouter();
</script>

<template>
  <swiper-slide class="swiper-slide">
    <div class="swiper-slide__item" @click="router.push({ name: RN.PROMO })">
      <img v-if="bp.tabletl" :src="pc5">
      <img v-else :src="mp5">
      <div class="swiper-slide__item-content">
        <div class="title">
          <span class="text-yellow">{{ $t('6YpWDoHC5ikcZc9IHuzk') }}</span> 590%
        </div>
        <div class="sub-title">
          {{ $t('osBkc6mnQhCpdqiybqvGp') }}
        </div>

        <AButton
          class="ant-cover__Button-3d-primary btn" type="primary"
          @click.stop="openDepositFn()"
        >
          {{ $t('2Wz7n5Gk1NiLxcall6eBg') }}
        </AButton>
      </div>
    </div>
  </swiper-slide>
</template>

<style scoped lang="scss">
@use './style.scss';
</style>
